<template>
  <div>
    <div>

      <span class="container" style="display: inline-block; vertical-align: middle; margin-right: 8px; font-size: 14px;">签名：</span>
      <el-input v-model="query" style="width: 200px; margin-right: 10px" placeholder="请输入签名"></el-input>
      &nbsp;&nbsp;      &nbsp;&nbsp;
      <span  class="container" style="display: inline-block; vertical-align: middle; margin-right: 8px; font-size: 14px;">状态：</span>
      <el-select  class="page" v-model="LXvalue" placeholder="请选择">
        <el-option
            v-for="item in options1"
            :key="item.value"
            :label="item.label"
            :value="item.value">
        </el-option>
      </el-select>
      &nbsp;&nbsp;

      <el-button type="primary" @click="searchSignatures">查询</el-button>
      <el-button type="primary" @click="openCreateDialog">+创建短信签名</el-button>
    </div>

    
    <el-dialog v-model="isCreateDialogVisible" title="创建短信签名" @close="isCreateDialogVisible = false">
      <el-form :model="newSignature">
        <el-form-item label="签名内容">
          <el-input v-model="newSignature.fqmnr"></el-input>
        </el-form-item>
        <span  class="container" style="display: inline-block; vertical-align: middle; margin-right: 8px; font-size: 14px;">状态：</span>
        <el-select v-model="selectedValue.fshzt">
          <el-option
              v-for="item in options1"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>

      </el-form>
      <div  style="margin-top: 20px; margin-left: 8px">
    <el-button @click="isCreateDialogVisible = false">取消</el-button>
    <el-button type="primary" @click="createSignature">提交</el-button>
  </div>
    </el-dialog>

    <div>
      <el-table :data="QMData" style="width: 100%; margin: 15px 0px">
        <el-table-column prop="fid" label="编号"></el-table-column>
        <el-table-column prop="fqmnr" label="签名"></el-table-column>
        <el-table-column prop="fshzt" label="状态"></el-table-column>
        <el-table-column prop="fcjsj" label="最后修改时间" :formatter="row => new Date(row.fcjsj).toLocaleString()"></el-table-column>
        <el-table-column prop="fcjsj" label="审核时间" :formatter="row => new Date(row.fcjsj).toLocaleString()"></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup>
import { ref, watch, onMounted } from 'vue';
import axios from 'axios';
import {ElMessage} from "element-plus";
import request from "@/utils/request";
const selectedValue = ref({
  fshzt: '1',
  // 其他可能的属性...
});const isCreateDialogVisible = ref(false);
const query = ref('');
const options1 = [
  { value: '1', label: '所有' },
  { value: '2', label: '待审核' },
  { value: '3', label: '审核中' },
  { value: '4', label: '审核不通过' },
  { value: '5', label: '可应用' },
];
const LXvalue = ref('');
const QMData = ref([]);
const newSignature = ref({
  fqmnr: '',
  fshzt: '1'  // 或者使用一个默认值
});

const openCreateDialog = () => {
  console.log("Selected value before opening the dialog:", selectedValue.value);
  newSignature.value.fshzt = selectedValue.value.fshzt; // 注意这里的变化
  isCreateDialogVisible.value = true;
};



const createSignature = async () => {
  newSignature.value.fshzt = selectedValue.value.fshzt;  // 注意这里的变化
  console.log("New Signature to be created:", newSignature.value);
  try {



    request.post('/signatures/create',newSignature.value).then(res => {
      isCreateDialogVisible.value = false;
      ElMessage.success('短信签名创建成功')
      }
    ).catch(error=>{
      console.log(error)
      ElMessage.error('短信签名创建失败')
    })


    // await axios.post('http://localhost:9000/signatures/create', newSignature.value);
    // isCreateDialogVisible.value = false;
    // ElMessage.success('短信签名创建成功!');
    await searchSignatures();
  } catch (error) {
    ElMessage.error('短信签名创建失败!');
  }
};

const searchSignatures = async () => {
  try {
    const params = {};
    if (query.value) {
      params.fqmnr = query.value;
    }
    if (LXvalue.value) {
      params.fshzt = LXvalue.value;
    }


    await request.get('/signatures/search',{params: params}).then(res => {
      // console.log(res)
      QMData.value = res.data
    })
    // const response = await axios.get('http://localhost:9000/signatures/search', {
    //   params: params
    // });
    //
    // QMData.value = response.data;
    console.log("Updated QMData:", QMData.value);
  } catch (error) {
    console.error("Error fetching data:", error);
    QMData.value = [];
  }
};

watch(query, searchSignatures);
watch(LXvalue, searchSignatures);
onMounted(()=>{
  searchSignatures()
})

</script>